<template>
	<view class="repair_box">
		<view class="goods_list_box w100 flexjus" v-for="(item,index) in goods" :key="index">
			<view class="flex">
				<view class="left_goods_img">
					<image class="w100 h100" :src="item.image_src" mode=""></image>
				</view>
				<view class="left_goods_name family f500 s26">
					{{item.title}}
				</view>
			</view>
			<view class="right_price">
				<view class="top_price_txt s32 f500 family">
					<text class="s24">￥</text>{{item.price}}
				</view>
				<view class="bottom_number_txt s22 family f500 txtali">
					共{{item.number}}件
				</view>
			</view>
		</view>
		<view class="state_box">
			<view class="top_box w100 flexjus">
				<view class="left_box s30 familytow fblod">
					物流状态
				</view>
				<view class="right_box flex">
					<picker @change="bindPickerChange" :value="index" :range="array">
						<view class="uni-input s26 family f500">{{array[index]}}</view>
					</picker>
					<view class="right_icon"></view>
				</view>
			</view>
			<view class="top_box w100 flexjus" style="border: none; margin-top:6upx;">
				<view class="left_box s30 familytow fblod">
					退款类型
				</view>
				<view class="right_box flex">
					<picker @change="bindPickerChange1" :value="index1" :range="array1">
						<view class="uni-input s26 family f500">{{array1[index1]}}</view>
					</picker>
					<view class="right_icon"></view>
				</view>
			</view>
			<view class="top_box w100 flexjus" style="border: none; margin-top:6upx;">
				<view class="left_box s30 familytow fblod">
					退款原因
				</view>
				<view class="right_box flex">
					<picker @change="bindPickerChange2" :value="index2" :range="array2">
						<view class="uni-input s26 family f500">{{array2[index2]}}</view>
					</picker>
					<view class="right_icon"></view>
				</view>
			</view>
		</view>
		<view class="tuikuan_box flex">
			<view class="left_box s30 familytow fblod">
				退款类型
			</view>
			<input class="uni-input-two s26 family f500" v-model="iptMoney" :placeholder="`退款金额不能超过${money}元`" />
		</view>
		<view class="pingzheng_box">
			<textarea class="textarea_box" v-model="detail" placeholder="请描述申请退货服务的具体原因" />
			<view class="flex" style="flex-wrap: wrap;">
				<view class="upload_box" style="margin-right: 10upx;" v-for="(item,index) in imgList" :key="index">
					<image class="w100 h100" style="border-radius: 8upx;" :src="item" mode=""></image>
				</view>
				<view class="upload_box" @click="uploadImg">
					<view class="upload_icon"></view>
					<view class="upload_txt s20 family f500 txtali">
						上传凭证
					</view>
				</view>
			</view>
		</view>
		<view class="submit_btn s28 fblod familytow txtali" @click="submitFrom">
			提交
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				array: ['已收到货','未收到货/已拒收'],
				array1: ['退款不退货', '退款退货'],
				array2: ['多拍/错拍/不想要', '商家未按约定时间发货', '7天无理由退款', '退运费', '系统签收商品未收到', '快递信息长时间未更新', '商品/赠品/配件/证书漏发', '商家发错货','与商家协商一致退款','其他'],
				index: 0,
				index1: 0,
				index2: 0,
				imgList: [],
				goods: [],
				iptMoney: '',
				detail: '',
				money:'',//最多退款金额
			}
		},
		onLoad(options) {
			this.goods = JSON.parse(options.data);
			//获取订单支付金额
			this.getMoney();
		},
		methods: {
			//获取订单支付金额
			getMoney(){
				this.$request({
					url: 'manage/get_money_pay',
					method: 'POST',
					data: {
						id: this.goods[0].order_id,
					}
				}).then(res => {
						if(res.data.code == 1) {
						this.money = res.data.data.money;
					}else {
						this.$wanlshop.msg(res.data.msg);
					}
				})
			},
			uploadImg() {
				this.$upLoadImage().then(res => {
					this.imgList.push(res.fullurl)
				})
			},
			submitFrom() {
				let list = []
				this.goods.map((item,index) => {
					list.push(item.id)
				})
				this.$request({
					url: 'refund/addApply',
					method: 'POST',
					data: {
						order_type: 'goods',
						goods: list.join(","),
						order_id: this.goods[0].order_id,
						money: this.iptMoney,
						type: this.index1,
						reason: this.index2,
						expressType: this.index,
						images: this.imgList.join(","),
						refund_content: this.detail
					}
				}).then(res => {
					if(res.data.code == 1) {
						uni.navigateTo({
							url: './submit_data'
						})
					}else {
						this.$wanlshop.msg(res.data.msg);
					}
				})
			},
			bindPickerChange: function(e) {
				this.index = e.detail.value;
			},
			bindPickerChange1: function(e) {
				this.index1 = e.detail.value;
			},
			bindPickerChange2: function(e) {
				this.index2 = e.detail.value;
			},
		}
	}
</script>

<style scoped lang="scss">
	.repair_box {
		overflow: hidden;

		.submit_btn {
			width: 686upx;
			height: 88upx;
			background: #EBBE87;
			border-radius: 50upx;
			line-height: 88upx;
			color: #FFFFFF;
			position: absolute;
			bottom: 70upx;
			left: 36upx;
		}

		.address_box {
			width: 686upx;
			height: 164upx;
			background: #FFFFFF;
			border-radius: 16upx;
			margin: 20upx auto;
			padding: 30upx 20upx 26upx 32upx;
			box-sizing: border-box;

			.right_icon_bot {
				width: 20upx;
				height: 30upx;
				background-image: url('');
				background-size: 100% 100%;
				margin-top: 38upx;
			}

			.address_detail_box {
				width: 408upx;
				color: #666666;
				line-height: 26upx;
				margin-left: 48upx;
				margin-top: 8upx;
			}

			.address_icon {
				width: 40upx;
				height: 40upx;
				background-image: url('');
				background-size: 100% 100%;
			}

			.user_info_box {
				margin-left: 8upx;

				.user_name {
					color: #000;
				}

				.user_phone {
					color: #000;
					margin-left: 20upx;
				}
			}
		}

		.tuikuan_box {
			width: 686upx;
			height: 88upx;
			background: #FFFFFF;
			border-radius: 16upx;
			margin: 20upx auto;
			padding-left: 32upx;
			box-sizing: border-box;

			.left_box {
				color: #000;
				line-height: 88upx;
			}

			.uni-input-two {
				width: 480upx;
				color: #999;
				margin-top: 22upx;
				margin-left: 28upx;
			}
		}

		.pingzheng_box {
			width: 686upx;
			background: #FFFFFF;
			border-radius: 16upx;
			margin: 20upx auto;
			padding: 26upx 32upx 20upx 32upx;
			box-sizing: border-box;

			.search_box {
				width: 622upx;
				height: 70upx;
				background: #F4F4F4;
				border-radius: 8upx;
				margin: 0 auto;
				color: #999;
				padding-left: 16upx;
				box-sizing: border-box;
				padding-top: 10upx;
			}
			
			.textarea_box{
				width: 100%;
				height: 320rpx;
				padding: 20rpx;
				line-height: 40rpx;
				font-size: 28rpx;
				box-sizing: border-box;
				background: #F4F4F4;
				border-radius: 8upx;
			}

			.upload_box {
				width: 150upx;
				height: 138upx;
				border-radius: 8upx;
				border: 2upx solid #E4E4E4;
				margin-top: 20upx;

				.upload_icon {
					width: 56upx;
					height: 46upx;
					background-image: url('');
					background-size: 100% 100%;
					margin-top: 32upx;
					margin-left: 46upx;
				}

				.upload_txt {
					color: #999;
					margin-top: 10upx;
				}
			}
		}

		.state_box {
			width: 686upx;
			background: #FFFFFF;
			border-radius: 16upx;
			margin: 20upx auto;
			padding: 22upx 32upx 22upx 32upx;
			box-sizing: border-box;

			.top_box {
				height: 64upx;
				border-bottom: 2upx solid #F4F4F4;

				.left_box {
					color: #000;
					line-height: 64upx;
				}

				.right_box {
					.uni-input {
						color: #666666;
						line-height: 64upx;
					}

					.right_icon {
						width: 16upx;
						height: 26upx;
						background-image: url('');
						background-size: 100% 100%;
						margin-top: 16upx;
						margin-left: 8upx;
					}
				}
			}
		}

		.goods_list_box {
			height: 184upx;
			background-color: #FFFFFF;
			padding-left: 32upx;
			padding-right: 32upx;
			box-sizing: border-box;

			.left_goods_img {
				width: 88upx;
				height: 88upx;
				background: #454545;
				border-radius: 8upx;
				margin-top: 56upx;
			}

			.left_goods_name {
				width: 356rpx;
				height: 72rpx;
				color: #333333;
				margin-left: 26upx;
				margin-top: 64upx;
				letter-spacing: 0;
				overflow: hidden;
				display: -webkit-box;
				text-overflow: ellipsis;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}

			.right_price {
				margin-top: 64upx;

				.top_price_txt {
					color: #000000;
				}

				.bottom_number_txt {
					color: #666666;
				}
			}
		}
	}
</style>
<style>
	page {
		background-color: #F4F4F4;
	}
</style>
